<template>
  <!-- 委托 -->
  <div class="pnerigh">
    <div class="pnerigh_title">
      <div :class="iscance1 ? '' : 'rigcan1'" class="rigtit_top">
        全
        <br />
        部
      </div>
      <div :class="iscance2 ? '' : 'rigcan1'" class="rigtit_top">
        可
        <br />
        撤
      </div>
    </div>
    <div class="pan_rig">
      <div class="pan_rig_top">
        <div class="pan_rig_to_zi">
          <button class="butt_cha" @click="btnlist && cancelorder()">撤单</button>
          <button class="butt_cha" @click="btnlist && wholecancelorder()">全部撤单</button>
        </div>
      </div>
      <div class="data_lst">
        <div class="data_title">
          <div class="title_one" style="width: 160px;">委托时间</div>
          <div class="title_one" style="width: 145px;">合约</div>
          <div class="title_one" style="width: 50px;">买卖</div>
          <div class="title_one" style="width: 145px;">委托价格</div>
          <div class="title_one" style="width: 145px;">委托手数</div>
          <div class="title_one" style="width: 60px;">状态</div>
          <!-- <div class="title_one" style="width: 90px;">备注</div> -->
          <div class="title_one" style="width: 145px;">委托号</div>
          <div class="title_one" style="width: 145px;">名称</div>
        </div>
        <div class="data_info">
          <div :class="activeClass2 == index ? 'activess' : ''" class="data_title_one" v-for="(item, index) in entrustlist" :key="index" @click="getEntrust(item, index)">
            <div class="title_sone" style="width: 160px;">{{ item.created_at }}</div>
            <div class="title_sone" style="width: 145px;">{{ item.symbol }}</div>
            <div :class="item.rise_fall == 'RISE' ? 'title_red' : 'title_green'" class="title_sone" style="width: 50px;">{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</div>
            <div class="title_sone" style="width: 145px;">{{ parseFloat(item.price || 0) }}</div>
            <div class="title_sone" style="width: 145px;">{{ item.volume }}</div>
            <div class="title_sone" style="width: 60px;">{{ item.state }}</div>
            <!-- <div class="title_sone" style="width: 90px;">{{ item.desc }}</div> -->
            <div class="title_sone" style="width: 145px;">{{ item.order_number }}</div>
            <div class="title_sone" style="width: 145px;">{{ item.symbol_cn }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  data() {
    return {
      btnlist: true,
      activeClass2: -1,
      entrustlist: [],
      iscance1: '',
      iscance2: '',
      form: ''
    };
  },
  mounted() {
    this.entrust();
  },
  methods: {
    //选中那一行
    getEntrust(item, index) {
      this.activeClass2 = index;
      this.form = item.id;
    },
    //撤单
    cancelorder() {
      this.btnlist = false;
      if (this.activeClass2 == -1) {
        this.btnlist = true;
        this.$notify.error('请选择订单！');
        return;
      }
      this.$post('addons/tf-futures/order-reason/kill-order', { order_id: this.form }).then(res => {
        this.btnlist = true;
        this.activeClass2 = -1;
        this.form = null;
        if (res.code == 200) {
          this.$notify.success('撤单成功！');
          this.entrust();
        } else {
          this.$notify.error('撤单失败！');
        }
      });
    },
    //全部撤单
    wholecancelorder() {
      this.btnlist = false;
      if (this.entrustlist == [] || this.entrustlist == null) {
        this.btnlist = true;
        this.$notify.error('订单为空不能全部撤单！');
        return;
      }
      this.$post('addons/tf-futures/order-reason/kill-all').then(res => {
        this.btnlist = true;
        this.activeClass2 = -1;
        this.form = null;
        this.entrust();
        if (res.code == 200) {
          this.$notify.success('全部撤单成功！');
        } else {
          this.$notify.error('全部撤单失败！');
        }
      });
    },
    //委托
    entrust() {
      this.$get('addons/tf-futures/order-reason/olist').then(res => {
        this.entrustlist = res.data;
      });
    }
  }
};
</script>

<style scoped>
/* 最外层盒子 */
.pnerigh {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 左侧按钮显示 */
.pnerigh_title {
  width: 25px;
  height: 100%;
  background-color: #ffffff;
}

.rigtit_top {
  width: 25px;
  height: 50%;
  background-color: #e3e2da;
  border: #003c74 solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
/* 按钮选中状态 */
.rigcan1 {
  background-color: #f7f7f7;
  color: #a0a0a0;
}
/* 右侧 */
.pan_rig {
  width: calc(100% - 30px);
  height: 100%;
  background-color: #ffffff;
}

.pan_rig_top {
  width: 100%;
  height: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 8px;
  box-sizing: border-box;
}

.pan_rig_to_zi {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* 撤单按钮 */
.butt_cha {
  width: 72px;
  height: 22px;
  border-radius: 3px;
  background-image: linear-gradient(to bottom, #fbfbfb, #f7f7f7, #f2f2f2);
  border: #003c74 solid 1px;
  margin-right: 5px;
  margin-left: 3px;
}

.data_lst {
  width: 100%;
  height: calc(100% - 25px);
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.data_title {
  height: 28px;
  margin-top: 2px;
  border-top: #7f9db9 solid 1px;
  border-bottom: #7f9db9 solid 1px;
  width: 200%;
}
/* 表格内容盒子 */
.data_info {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: calc(100% - 30px);
  box-sizing: border-box;
  padding-bottom: 20px;
  width: 200%;
}
/* 盒子内容 */
.data_title_one {
  width: 100%;
  height: 28px;
  display: flex;
  justify-content: flex-start;
}

.title_one {
  float: left;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
  border-right: #7f9db9 solid 1px;
  color: #000000;
}

.title_sone {
  float: left;
  color: #000000;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
}

.title_red {
  color: #fe2424;
}

.title_green {
  color: #007f00;
}

.title_blue {
  color: #0000ff;
}

/*持仓状态*/
.activess {
  background-color: #3399ff;
  color: #ffffff;
}
</style>
